<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <!-- <input type="text" name="" id="" v-model="message"> -->
        <!-- <input type="text" :value="message" @input="valueChange"> -->
        <!-- <input type="text" :value="message" @input="message = $event.target.value"> -->
        <!-- 修饰符.lazy -->
        <!-- <input type="text" name="" id="" v-model.lazy="message"> -->
        <!-- 修饰符.number 限制input框里输入数字 -->
        <!-- 修饰符.trim qutiao -->


        <!-- <label for="male">
            <input type="radio" value="男" id="male" v-model="sex">男
        </label>
        <label for="">
            <input type="radio" value="女" id="female" v-model="sex">女
        </label>
        <h2>你选择的性别是： {{sex}} </h2> -->
        <!-- 单选框 -->
        <!-- <label for="agree">
            <input type="checkbox" name="" id="agree" v-model="isAgree">同意协议
        </label>
        <h2>您选择的是：{{isAgree}} </h2> -->
        <!-- 多选框 -->
        <input type="checkbox" name="" id="" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" name="" id="" value="足球" v-model="hobbies">足球
        <input type="checkbox" name="" id="" value="排球" v-model="hobbies">排球
        <input type="checkbox" name="" id="" value="铅球" v-model="hobbies">铅球
        <h2>你的爱好：{{hobbies}} </h2>
        <!-- v-model中select -->
        <!-- 选择一个 -->
        <!-- <select name="one" id="" v-model="fruits" multiple>
            <option value="葡萄" selected>葡萄</option>
            <option value="香蕉">香蕉</option>
            <option value="苹果">苹果</option>
        </select>
        <h2>你选择的水果是：{{fruits}} </h2> -->
        <!-- 值绑定 -->
        <label v-for="item in selectHobbies" :for="item">
            <input type="checkbox" :id="item" v-model="hobbies" :value="item">{{item}}
        </label>
    </div>
    <script src="vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                message:'Hellow World!',
                sex:'',
                isAgree:false,
                hobbies:[],
                selectHobbies:['篮球','足球','排球','铅球'],
                fruits:'',
            },
            methods:{
                valueChange(event){
                    this.message = event.target.value 
                }
            },
            computed:{}
        });
    </script>
</body>
</html>